<template>
  <div id="appLogin" style="position:absolute;top:0;left:0;bottom:0;right:0;">
    <div class="logo-box">
      <div class="logo-bg"></div>
      <p class="system-name">咸鱼棋牌游戏管理系统</p>
      <fieldset class="sub-title">
        <legend>咸鱼棋牌</legend>
      </fieldset>
    </div>
    <div class="login-box">
      <form class="data-form">
        <input class="input-text-image ipt-username" type="text" name="username" v-model="username" placeholder="用户名--wangZH" />
        <input class="input-text-image ipt-password" type="password" name="password" v-model="password"  placeholder="密码--wang123" />
        <div class="save-box">
          <div id="save-btn" class="loginBtn-style login-btn" @click="loginFn()">登录</div>
          <p class="customer-service"><a href="">联系客服</a></p>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  import {userContent} from '../../service/getData';
  export default {
    data(){
      return {
        username:'',
        password:''
      }
    },
    mounted(){
      let _this = this;
      this.$nextTick(function () {
        // enter
        $('body').keyup(function(e){
          if(e.keyCode == 13){
            _this.loginFn();
          }
        })
      })
    },
    methods:{
      loginFn(){
        let _this = this;
        // 1、 模拟数据的login
        /*let ser_name = userContent.userLogin.username;
        let ser_pswd = userContent.userLogin.password;
        if(ser_name == _this.username && ser_pswd == _this.password){
          layer.msg('登录成功',{time:1500},function(){
            _this.$router.push('/home');
          })
        }else{
          layer.msg('帐号或密码错误')
        }*/
        // 2、 有数据库mysql时的login
        let user = this.username;
        let pass = this.password;
        this.$http.post('/api/user/login', {username: user,password: pass}).then((response) => {
          //console.log(response);
          //console.log(response.body);
          if(response.body.code === 200){
            layer.msg('登录成功',{time:1500},function(){
              _this.$router.push('/home');
            })
          }else{
            layer.msg('帐号或密码错误')
          }

        })
        // 3、 条件查询数据库数据
        /*let user = this.username;
        let pass = this.password;
        this.$http.post('/api/user/order', {type: user,orderNum: pass}).then((response) => {
          console.log(response.body);
        });*/


      }


    }

  }
</script>
<style scoped lang="less">
  @import "../../style/login";
</style>
